<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>动作组合编辑</span>
    </div>
    <div class="" style="width: 320px; height: 600px; overflow-y: scroll;">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item labe<!-- l="动作编码">
          <el-input size="mini" v-model.number="form.ID"></el-input>
        </el-form-item> -->
        <el-form-item label="动作名称">
          <el-input size="mini" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="动作参数">
          <el-select filterable allow-create default-first-option size="mini" v-model="form.ParaIDs" multiple
            placeholder="请选择">
            <el-option v-for="item in parasIDsCode" :key="item.value" :label="item.value +' '+item.label"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.groupName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-button style="margin-bottom: 12px;" size="mini" type="primary" @click="handleUpdate">增加条件</el-button> -->
        <div class="cfgEventCondition" v-for="(item,i) in form.cfgEventCondition" :key="i">
          <el-form-item :label="'条件'+(i+1)">
            <el-form-item label="条件名称">
              <el-input size="mini" v-model="item.name"></el-input>
            </el-form-item>
            <el-form-item label="条件类型">
              <el-select @change="item.ParaIDs=[]" v-model="item.TypeID" size="mini" placeholder="请选择">
                <el-option v-for="item in enCombinedActConditionType" :key="item.key" :label="item.name"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="最大超时">
              <el-input-number size="mini" controls-position="right" v-model="item.maxTimeout100MS" :precision="2"
                :step="0.1" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="条件参数">
              <el-select v-if="item.TypeID!=4&&item.TypeID!=9&&item.TypeID!=10&&item.TypeID!=12" filterable allow-create
                default-first-option size="mini" v-model="item.ParaIDs" multiple placeholder="请选择">
                <el-option v-for="item in parasIDsCode" :key="item.value" :label=" item.value +' '+item.label"
                  :value="item.value">
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.groupName }}</span>
                </el-option>
              </el-select>
              <div class=" " v-else-if="item.TypeID==4">
                <el-select size="small" v-model="item.ParaIDs[0]" placeholder="请选择">
                  <el-option v-for="item in CfgCombineControlDefine" :key="item.ID" :label="item.name" :value="item.ID">
                  </el-option>
                </el-select>
                <el-select size="small" filterable allow-create v-model="item.ParaIDs[1]" placeholder="请选择">
                  <template v-for="item in tableData">
                    <div class="" :key="item.ID">
                      <el-option v-for="key in item.items" :key="key.ID" :label="key.name" :value="key.ID"
                        :disabled="form.ID==key.ID">
                      </el-option>
                    </div>
                  </template>
                </el-select>
                <el-select size="small" filterable allow-create v-model="item.ParaIDs[2]" placeholder="请选择">
                  <el-option v-for="(item,i) in getConditions(item.ParaIDs[1])" :key="item.ID"
                    :label="item.name?item.name:'未命名'" :value="item.ID">
                  </el-option>
                </el-select>
                <el-select size="small" v-model="item.ParaIDs[3]" placeholder="请选择">
                  <el-option v-for="item in enCheckState" :key="item.key" :label="item.name" :value="item.key">
                  </el-option>
                </el-select>
              </div>
              <div class="" v-else-if="item.TypeID==12">
                <el-select size="small" v-model="item.ParaIDs[0]" placeholder="请选择">
                  <el-option v-for="item in CfgCombineControlDefine" :key="item.ID" :label="item.name" :value="item.ID">
                  </el-option>
                </el-select>
                <el-select size="small" filterable allow-create v-model="item.ParaIDs[1]" placeholder="请选择">
                  <template v-for="item in tableData">
                    <div class="" :key="item.ID">
                      <el-option v-for="key in item.items" :key="key.ID" :label="key.name" :value="key.ID"
                        :disabled="form.ID==key.ID">
                      </el-option>
                    </div>
                  </template>
                </el-select>
                <el-select size="small" v-model="item.ParaIDs[2]" placeholder="请选择">
                  <el-option v-for="item in enCheckState" :key="item.key" :label="item.name" :value="item.key">
                  </el-option>
                </el-select>
              </div>
              <div class="" v-else-if="item.TypeID==10||item.TypeID==9">
                <el-input-number size="mini" controls-position="right" v-model="item.ParaIDs[0]" :min="0" :max="12"
                  label="描述文字">
                </el-input-number>
                <div class="ParaIDsGrid ">
                  <template v-for="i in getParaIDsArr(item.ParaIDs[0])">
                    <div class="" style="width: 120px;" :key="i" v-if="i!=getParaIDsArr(item.ParaIDs[0])">
                      <el-select size="small" v-model="item.ParaIDs[i]" placeholder="请选择" v-if="(i-1)%4==0">
                        <el-option v-for="item in CfgCombineControlDefine" :key="item.ID" :label="item.name"
                          :value="item.ID">
                        </el-option>
                      </el-select>
                      <el-select size="small" filterable allow-create v-model="item.ParaIDs[i]" v-else-if="(i-1)%4==1"
                        placeholder="请选择">
                        <template v-for="item in tableData">
                          <div class="" :key="item.ID">
                            <el-option v-for="key in item.items" :key="key.ID" :label="key.name" :value="key.ID"
                              :disabled="form.ID==key.ID">
                            </el-option>
                          </div>
                        </template>
                      </el-select>
                      <el-select size="small" filterable allow-create v-model="item.ParaIDs[i]" v-else-if="(i-1)%4==2"
                        placeholder="请选择">
                        <el-option v-for="(item,i) in getConditions(item.ParaIDs[i-1])" :key="item.ID"
                          :label="'条件'+(i+1)" :value="item.ID">
                        </el-option>
                      </el-select>
                      <el-select size="small" v-model="item.ParaIDs[i]" placeholder="请选择" v-else-if="(i-1)%4==3">
                        <el-option v-for=" item in enCheckState" :key="item.key" :label="item.name" :value="item.key">
                        </el-option>
                      </el-select>
                    </div>
                  </template>
                </div>
              </div>
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="item.handlerDefines.push({})" circle>
                增加执行器
              </el-button>
              <el-form-item :label="'执行器'+(i+1)" v-for="(key,i) in item.handlerDefines" :key="i">
                <div class="flex" slot="label">
                  <el-button style="height: 28.13px;" type="primary" size="mini" icon="el-icon-delete"
                    @click="handleDeleteDefines(item,i)" circle>
                  </el-button>
                  <div class="">
                    {{'执行器'+(i+1)}}
                  </div>
                </div>
                <el-form-item label="执行器类型">
                  <el-select style="width: 120px;" v-model="key.TypeID" size="mini" placeholder="请选择">
                    <el-option v-for="item in enCombinedHandlerType" :key="item.key" :label="item.name"
                      :value="item.key">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="执行数据">
                  <el-select v-model="key.Data" style="width: 120px;" size="mini" multiple="" placeholder="请选择">
                    <el-option v-for="item in enActionCode" :key="item.key" :label="item.name" :value="item.key">
                    </el-option>
                  </el-select>
                </el-form-item>
                <!--  <el-button type="primary" size="mini" icon="el-icon-delete" @click="handleDeleteDefines(item,i)" circle>
                </el-button> -->
              </el-form-item>
            </el-form-item>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="handleUpdate">更新</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
  import InDB from "../utils/initDB.js"
  import enCombinedHandlerType from '../data/enCombinedHandlerType.js'
  import parasIDsCode from "../data/paraDataCode.js"
  import enCombinedActConditionType from "../data/enCombinedActConditionType.js"
  import enCheckState from "../data/enCheckState.js"
  import enActionCode from "../data/enActionCode.js"
  export default {
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        }
      },
      tableData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        enActionCode: enActionCode,
        enCombinedHandlerType: enCombinedHandlerType,
        enCombinedActConditionType: enCombinedActConditionType,
        enCheckState: enCheckState,
        parasIDsCode: parasIDsCode,
        // IDs: [
        //   0, 1, 2, 3
        // ],
        Elements: [],
        Conditoins: [],
        CfgCombineControlDefine: [],
      }
    },
    methods: {
      handleDeleteDefines(r, i) {
        r.handlerDefines.splice(i, 1)
      },
      getParaIDsArr(num) {
        if (!num && num != 0) {
          return 0
        }
        return num * 4 + 1
      },
      getConditions(id) {
        for (let i = 0; i < this.tableData.length; i++) {
          let item = this.tableData[i]
          for (let k = 0; k < item.items.length; k++) {
            let key = item.items[k]
            if (id == key.ID) {
              return key.cfgEventCondition
            }
          }
        }
      },
      handleUpdate() {
        this.$emit('handleUpdate', this.form)
      },
    },
    mounted() {
      InDB.CfgCombineControlDefine.all().then(res => {
        this.CfgCombineControlDefine = res
      })
    }
  }
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .ParaIDsGrid {
    width: 550px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
</style>
